<div class="d-flex flex-row justify-content-between align-items-center">
  <div class="d-flex align-items-center">
    <span class="d-block font-weight-bold mr-1"
      >{{ 'dashboard.heading.CVE_DB_VERSION' | translate }}
      {{ scannerVersion }}</span
    >
    <i
      [matTooltip]="
        ('registry.CVE_DB_DATE' | translate) +
        ': ' +
        (scannerDate | date: 'medium')
      "
      class="eos-icons eos-18"
      >info</i
    >
  </div>
  <div class="d-flex flex-row justify-content-center align-items-center">
    <button [matMenuTriggerFor]="menu" class="p-2" mat-button>
      {{ 'network.SETTING' | translate }}
      <i class="eos-icons mb-1">arrow_drop_down</i>
    </button>
    <mat-menu #menu="matMenu">
      <button
        (click)="toggleAcceptedVulnerability()"
        *ngIf="acceptedVulnerabilityStatus"
        class="d-flex align-items-center"
        mat-menu-item>
        <i class="eos-icons mr-2">visibility_off</i
        >{{ 'enum.HIDE_ACCEPTED_VULS' | translate }}
      </button>
      <button
        (click)="toggleAcceptedVulnerability()"
        *ngIf="!acceptedVulnerabilityStatus"
        class="d-flex align-items-center"
        mat-menu-item>
        <i class="eos-icons mr-2">visibility</i
        >{{ 'enum.SHOW_ACCEPTED_VULS' | translate }}
      </button>
      <ng-container *appDisplayControl="'write_vuls_profile'">
        <button
          *ngIf="selectedVulnerability && !isAccepted(selectedVulnerability)"
          (click)="onAcceptVulnerability()"
          class="d-flex align-items-center"
          mat-menu-item>
          <i class="eos-icons mr-2">check_box</i
          >{{ 'cveProfile.ACCEPT_VUL' | translate }}
        </button>
      </ng-container>
    </mat-menu>
    <button
      *ngIf="hasLayers"
      (click)="exportCVELayers()"
      class="mx-1 d-flex align-items-center"
      mat-button>
      <i class="eos-icons icon-18">csv_file</i
      >{{ 'registry.CVE_REPORT_BY_LAYER' | translate }}
    </button>
    <button
      *ngIf="
        selectedLayer &&
        selectedLayer.vulnerabilities &&
        selectedLayer.vulnerabilities.length > 0
      "
      (click)="exportCVE()"
      class="d-flex align-items-center"
      mat-button>
      <i class="eos-icons icon-18">csv_file</i
      >{{ 'registry.CVE_REPORT' | translate }}
    </button>
  </div>
</div>
<div style="height: 4px; width: 100%">
  <mat-progress-bar *ngIf="refreshing" mode="indeterminate"></mat-progress-bar>
</div>
<div class="row registry-vulnerability-row mr-0">
  <div class="col-4">
    <app-layers-table
      (layerSelected)="layerSelected($event)"
      [resize]="resize"
      [rowData]="layers"></app-layers-table>
  </div>
  <div class="col-8 terminal p-0">
    <div class="cmds">
      <ng-container *ngIf="selectedLayer?.cmds">
        <span
          *ngFor="let cmd of selectedLayer.cmds.split(',')"
          class="d-block"
          >{{ cmd }}</span
        >
      </ng-container>
    </div>
  </div>
  <div class="col-8 mt-2">
    <app-vulnerabilities-grid
      (vulnerabilitySelected)="vulnerabilitySelected($event)"
      [resize]="resize"
      [rowData]="selectedLayer?.vulnerabilities"
      [useQuickFilterService]="true"
      tableHeight="100%"></app-vulnerabilities-grid>
  </div>
  <div class="col-4 mt-2 vulnerability-description-container p-0">
    <div class="vulnerability-description">
      <div class="vulnerability-description-header">
        {{ selectedVulnerability?.name }}
        <a
          *ngIf="selectedVulnerability?.link"
          [href]="selectedVulnerability?.link"
          ><i class="ml-2 eos-icons">launch</i></a
        >
      </div>
      <div class="vulnerability-description-body">
        {{ selectedVulnerability?.description }}
      </div>
    </div>
  </div>
</div>
